<template>
  <div>
    <el-table :data="tableData" style="width: 30%" border>
      <el-table-column prop="projectName" label="项目名称"  v-model="projectName">
      </el-table-column>
      <el-table-column prop="level1" label="水平1">
        <template slot-scope="scope">
            <el-checkbox v-model="scope.row.level1"  width="55" disabled/>
        </template>
      </el-table-column>
      <el-table-column prop="level2" label="水平2">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.level2"  width="55" disabled/>
        </template>
      </el-table-column>
      <el-table-column prop="level3" label="水平3"  >
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.level3"  width="55" disabled/>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
  </div>
</template>
<script>

export default {
  name: 'levelSwitch',
  data() {
    return {
      tableData: [{
        projectName: '',
        level1: true,
        level2: false,
        level3: false
      }],
      loading: false,
      total: 2,
      pageNum: 1,
      pageSize: 20
    };
  },
  created() {
    this.handleLoadAndQuery()
  },
  methods: {
    handleLoadAndQuery() {
      this.tableData = [{
        projectName: 'CRP',
        level1: true,
        level2: true,
        level3: true
      },{
        projectName: 'SAA',
        level1: true,
        level2: true,
        level3: true
      }]
    }
  }
};
</script>
